<template>
    <div class="main">
        <el-card class="card">
            <div class="title">
                <h2 style="text-align: center">报表查看</h2>
            </div>
        </el-card>
        <br />
                <el-button type="success" v-print="`#print`">打 印</el-button>
                    <!-- <el-button type="primary" @click="toImg" >转图片打印</el-button> -->
                <el-button  @click="back">返 回</el-button>
                <!-- <div ref="printContent"> -->
                    <el-card id="print" >
                        <div style="layout-grid: 15.6pt">
                            <table class="MsoNormalTable" border="1" cellspacing="0" cellpadding="0" width="100%">
                                <tr style="mso-yfti-irow: 0; mso-yfti-firstrow: yes">
                                    <td width="25%" colspan="6" valign="top" class="td01">
                                        <p class="MsoNormal" style="line-height: 150%">
                                            <span class="MsoNormalFont">责任部门：（支持多个）</span>
                                            <div>
                                                {{reportFormBasicInfo.managerDeptId}}
                                            </div>
                                        </p>
                                    </td>
                                    <td width="50%" colspan="12" valign="top" class="td02">
                                        <p class="MsoNormal" style="line-height: 150%">
                                            <span class="MsoNormalFont">项目/任务名称：</span>
                                            <div>
                                                {{reportFormBasicInfo.projectName}}
                                            </div>
                                        </p>
                                    </td>
                                    <td width="24%" colspan="5" valign="top" class="td03">
                                        <p class="MsoNormal" style="line-height: 150%">
                                            <span class="MsoNormalFont reportDate">报告日期：</span>
                                            {{reportFormBasicInfo.projectGenerateTime}}
                                        </p>
                                    </td>
                                </tr>
                                <!--第二行-->
                                <tr style="mso-yfti-irow: 1">
                                    <td width="100%" colspan="23" valign="top" class="td04">
                                        <p class="MsoNormal" style="line-height: 150%">
                                            <span class="MsoNormalFont">主要目标：</span>
                                            {{reportFormBasicInfo.mainTarget}}
                                        </p>
                                    </td>
                                </tr>

                                <tr style="mso-yfti-irow: 2">
                                    <td width="14%" colspan="4" valign="top" class="td05">
                                        <p align="center" style="text-align: center; line-height: 150%">
                                            <span class="MsoNormalFont">目标类</span>
                                        </p>
                                    </td>
                                    <td width="17%" colspan="3" valign="top" class="td06">
                                        <p align="center" style="text-align: center; line-height: 150%">
                                            <span class="MsoNormalFont">主要任务/工作</span>
                                        </p>
                                    </td>
                                    <td width="48%" colspan="12" valign="top" class="td07">
                                        <p class="MsoNormal" style="line-height: 150%">
                                            <span class="MsoNormalFont">项目结束时间要求：{{reportFormBasicInfo.projectEndTime}}</span>
                                        </p>
                                    </td>
                                    <td width="20%" colspan="4" valign="top" class="td08">
                                        <p class="MsoNormal" style="line-height: 150%">
                                            <span class="MsoNormalFont">负责人/优先级（支持多人）</span>
                                        </p>
                                    </td>
                                </tr>

                                <!--具体内容-->
                                <tr style="mso-yfti-irow: 5"  v-for="(content,i) in reportFormWorkList" :key="i">
                                    <!--目标类内容-->
                                    <td class="td5-1" v-for="(typeItem,index) in content.typeList" :key="index" width="3%" valign="top">
                                        <p class="MsoNormal" style="line-height: 150%">
                                            <span lang="EN-US" style="font-size: 5.5pt; line-height: 150%">&nbsp;{{typeItem}}</span>
                                        </p>
                                    </td>
                                    <!--主要任务序号工作-->
                                    <td class="td5-2" width="5%" valign="top">
                                        <p class="MsoNormal" style="line-height: 150%">
                                            <span lang="EN-US" style="font-size: 5.5pt; line-height: 150%">{{content.number}}</span>
                                        </p>
                                    </td>
                                    <!--主要任务内容工作-->
                                    <td width="11%" colspan="2" valign="top" class="td5-3">
                                        <p class="MsoNormal" style="line-height: 150%">
                                            <span lang="EN-US" style="font-size: 5.5pt; line-height: 150%">&nbsp;{{content.name}}</span>
                                        </p>
                                    </td>

                                    <!--每月项目情况-->
                                    <td v-for="(item,index2) in reportFormWorkOtherInfoList[i]" :key="index2" width="3%" valign="top" class="td5-4">
                                        <p class="MsoNormal" style="line-height: 150%">
                                            <span lang="EN-US" style="font-size: 5.5pt; line-height: 150%">&nbsp;
                                                <!-- <el-button  circle v-if="item.workType==1" ></el-button> -->

                                                    <el-popover
                                                    v-if="item.workType==2"
                                                    placement="top-start"
                                                    title="说明"
                                                    width="200"
                                                    trigger="hover">
                                                    <ul>
                                                        <li>
                                                        {{item.workInfo}}
                                                        </li>
                                                    </ul>
                                                    <el-button  type="success" circle  slot="reference"></el-button>
                                                </el-popover>

                                                  
                                                <el-popover
                                                v-if="item.workType==3"
                                                    placement="top-start"
                                                    title="说明"
                                                    width="200"
                                                    trigger="hover"
                                                    >
                                                    <ul>
                                                        <li>
                                                        {{item.workInfo}}
                                                        </li>
                                                    </ul>
                                                    <el-button  type="warning" circle  slot="reference"></el-button>
                                                </el-popover>
                                                <el-popover
                                                    v-if="item.workType==4"
                                                    placement="top-start"
                                                    title="说明"
                                                    width="200"
                                                    trigger="hover">
                                                    <ul>
                                                        <li>
                                                        {{item.workInfo}}
                                                        </li>
                                                    </ul>
                                                    <el-button  type="danger" circle  slot="reference"></el-button>
                                                </el-popover>
                                                <el-popover
                                                    v-if="item.workType==5"
                                                    placement="top-start"
                                                    title="说明"
                                                    width="200"
                                                    trigger="hover">
                                                <ul>
                                                        <li>
                                                        {{item.workInfo}}
                                                        </li>
                                                    </ul>
                                                    <el-button  type="info" circle  slot="reference"></el-button>
                                                </el-popover>
                                                <!-- <el-button  type="success" circle v-if="item.workType==2" ></el-button>
                                                <el-button  type="warning" circle v-if="item.workType==3" ></el-button>
                                                <el-button  type="danger" circle v-if="item.workType==4" ></el-button>
                                                <el-button  type="info" circle v-if="item.workType==5" ></el-button> -->
                                                <!-- <div class="c1" style=""></div> -->
                                            </span>
                                        </p>
                                    </td>

                                    <!--负责人优先级情况情况-->
                                    <td v-for="(managerItem,index) in content.manager"  :key="index"  width="5%" valign="top" class="td5-5">
                                        <p style="line-height: 150%">
                                            <span style="font-size: 5.5pt; line-height: 150%">&nbsp;{{managerItem}}</span>
                                        </p>
                                    </td>
                                </tr>

                                <!--月份行-->
                                <tr style="mso-yfti-irow: 6; height: 40.05pt">
                                    <td class="td6-1" width="3%" rowspan="3">
                                        <p class="MsoNormal" align="center" style="text-align: center; line-height: 150%">
                                            <span lang="EN-US" style="font-size: 5.5pt; line-height: 150%">C</span>
                                        </p>
                                    </td>
                                    <td class="td6-2" width="3%" rowspan="3">
                                        <p class="MsoNormal" align="center" style="text-align: center; line-height: 150%">
                                            <span lang="EN-US" style="font-size: 5.5pt; line-height: 150%">B</span>
                                        </p>
                                    </td>
                                    <td class="td6-3" width="3%" rowspan="3">
                                        <p align="center" style="text-align: center; line-height: 150%">
                                            <span style="font-size: 5.5pt; line-height: 150%">A</span>
                                        </p>
                                    </td>
                                    <td class="td6-4" width="3%" rowspan="3">
                                        <p class="MsoNormal" align="center" style="text-align: center; line-height: 150%">
                                            <span lang="EN-US" style="font-size: 5.5pt; line-height: 150%">A+</span>
                                        </p>
                                    </td>
                                    <td class="td6-5" width="17%" colspan="3" rowspan="2" valign="top">
                                        <p class="MsoNormal" style="line-height: 150%">
                                            <span lang="EN-US" style="font-size: 5.5pt; line-height: 150%"
                                                ><span style="mso-spacerun: yes">        </span></span
                                            ><span class="MsoNormalFont">工作</span
                                            ><span lang="EN-US" style="font-size: 5.5pt; line-height: 150%"></span>
                                        </p>
                                        <p class="MsoNormal" align="center" style="text-align: right; line-height: 150%; tab-stops: right 118.1pt;">
                                            <span class="MsoNormalFont">进度</span>
                                        </p>
                                        <p style="line-height: 150%; tab-stops: right 118.1pt">
                                            <span class="MsoNormalFont">目标</span>
                                        </p>
                                        <p class="MsoNormal" align="right" style="text-align: right; line-height: 150%">
                                            <span class="MsoNormalFont">成本</span>
                                        </p>
                                        <p class="MsoNormal" style="line-height: 150%">
                                            <span class="MsoNormalFont">备注</span>
                                        </p>
                                    </td>
                                    <!--1-12月渲染-->
                                    <td class="td6-6" v-for="(n,index) in 12" :key="index" width="3%" valign="top">
                                        <p class="MsoNormal" style="line-height: 150%">
                                            <span class="MsoNormalFont">{{ n }}月</span>
                                        </p>
                                    </td>
                                    <!--负责人姓名-->
                                    <td class="td6-7" v-for="(managerItem,index) in managerListLevel" :key="index" width="5%" valign="top">
                                        <p class="MsoNormal" style="line-height: 150%">
                                            <span class="MsoNormalFont">{{managerItem}}</span
                                            ><span lang="EN-US" style="font-size: 5.5pt; line-height: 150%"></span>
                                        </p>
                                        <p class="MsoNormal" style="line-height: 150%">
                                            <span lang="EN-US" style="font-size: 5.5pt; line-height: 150%">&nbsp;</span>
                                        </p>
                                    </td>
                                </tr>

                                <!--成本行-->
                                <tr style="mso-yfti-irow: 7">
                                    <td class="td7-1" width="44%" colspan="11">
                                        <table border="1" cellspacing="0" cellpadding="0" class="td10">
                                            <!--进度条-->

                                            <tr>
                                                <td width="417" valign="top" class="td09">
                                                    <el-progress :text-inside="true" :stroke-width="26" :percentage="reportForm.reportFormBasicOtherInfo.moneyUsed" ></el-progress>
                                                </td>
                                            </tr>
                                        </table>
                                        <p class="MsoNormal" align="center" style="text-align: center; line-height: 150%">
                                            <span lang="EN-US" style="font-size: 5.5pt; line-height: 150%"></span>
                                        </p>
                                    </td>
                                    <td class="td7-2" width="24%" colspan="5">
                                        <p align="right" style="text-align: right; line-height: 150%">
                                            <span style="font-size: 5.5pt; line-height: 150%">{{moneyLeft}}</span
                                            ><span class="MsoNormalFont">元，已使用<span style="width: 60px;padding: 0 10px">{{reportForm.reportFormBasicOtherInfo.moneyUsed}}</span>%</span>
                                        </p>
                                    </td>
                                </tr>

                                <!--备注行-->
                                <tr style="mso-yfti-irow: 8; mso-yfti-lastrow: yes; height: 13.3pt">
                                    <td class="td8" width="85%" colspan="19" valign="top">
                                        <p class="MsoNormal" style="line-height: 150%">
                                            <span lang="EN-US" style="font-size: 5.5pt; line-height: 150%">&nbsp;
                                                {{reportForm.reportFormBasicOtherInfo.remark}}
                                            </span>
                                        </p>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <br />
                        
                    </el-card>
                <!-- </div> -->


    </div>
</template>

<script>
import moment from 'moment';
import reportFormsApi from '../../api/reportForms';
// import html2canvas from 'html2canvas'; // 转图片打印需要先安装html2Canvas和print-js
// import printJS from 'print-js';
export default {
    props: {
        reportForm: Object
    },
    data() {
        return {
            reportFormBasicInfo: {},
            reportFormBasicOtherInfo: {},
            reportFormWorkList: {},
            reportFormWorkOtherInfoList: [],
            // 负责人优先级
            managerListLevel: ['A', 'B', 'C', 'D'],
            percentage: 0,
            dialogVisible: false,
            moneyLeft: 0,
            value: ''
            // 打印变量
            // printObj: {
            //     id: 'print',
            //     popTitle: '',
            //     extraCss: 'https://www.google.com,https://www.google.com',
            //     extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>'
            // }
        };
    },
    methods: {
        // toImg() {
        //     // 转图片打印
        //     let scale = window.devicePixelRatio; // 获取设备像素比
        //     let imgWidth = window.document.querySelector('#print').offsetWidth; // 获取DOM宽度
        //     html2canvas(this.$refs.printContent, {
        //         backgroundColor: null,
        //         useCORS: true,

        //     }).then((canvas) => {
        //         // let url = canvas.toDataURL('image/jpeg', 1.0)
        //         const url = canvas.toDataURL();
        //         this.img = url;
        //         printJS({
        //             printable: url,
        //             type: 'image'
        //         });
        //         console.log(url);
        //     });
        // },

        back() {
            this.$emit('cancelCreateReport');
        },
        // 12个月数据
        initMonth() {
            let tempWorkId = new Set();
            for (let i = 0; i < this.reportForm.reportFormWorkOtherInfoList.length; ++i) {
                tempWorkId.add(this.reportForm.reportFormWorkOtherInfoList[i].workId);
            }

            let index = 0;
            for (let item of tempWorkId) {
                this.reportFormWorkOtherInfoList[index] = new Array(12);
                let tempIn = 0;
                for (let i = 0; i < this.reportForm.reportFormWorkOtherInfoList.length; ++i) {
                    if (this.reportForm.reportFormWorkOtherInfoList[i].workId == item) {
                        this.reportFormWorkOtherInfoList[index][tempIn++] = {
                            month: this.reportForm.reportFormWorkOtherInfoList[i].month,
                            workType: this.reportForm.reportFormWorkOtherInfoList[i].workType,
                            workInfo: this.reportForm.reportFormWorkOtherInfoList[i].workInfo
                        };
                    }
                }

                index++;
            }
        }
    },
    watch: {
        reportForm() {
            console.log(this.reportForm);
            this.reportFormBasicInfo = {
                managerDeptId: this.reportForm.reportFormBasicInfo.managerDeptId,
                projectName: this.reportForm.reportFormBasicInfo.projectName,
                mainTarget: this.reportForm.reportFormBasicInfo.mainTarget,
                projectEndTime: this.reportForm.reportFormBasicInfo.projectEndTime
            };
            // 时间初始化
            this.reportFormBasicInfo.projectEndTime = moment(this.reportFormBasicInfo.projectEndTime).format('YYYY-MM-DD');
            // 工作任务列表
            this.reportFormWorkList = this.reportForm.reportFormWorkList;

            for (let i = 0; i < this.reportFormWorkList.length; ++i) {
                this.reportFormWorkList[i].manager = this.reportFormWorkList[i].manager.split(',');
                // 负责人数组
                if (this.reportFormWorkList[i].manager.length < 4) {
                    let inputCount = 4 - this.reportFormWorkList[i].manager.length;
                    for (let j = 0; j < inputCount; ++j) {
                        this.reportFormWorkList[i].manager.push(' ');
                    }
                }
                if (this.reportFormWorkList[i].manager.length > 4) {
                    let inputCount = this.reportFormWorkList[i].manager.length - 4;
                    for (let j = 0; j < inputCount; ++j) {
                        this.reportFormWorkList[i].manager.pop();
                    }
                }
                // 处理目标类类型
                this.reportFormWorkList[i].typeList = [];

                for (let type = 0; type <= 3; ++type) {
                    this.reportFormWorkList[i].typeList[type] = ' ';
                    if (this.reportFormWorkList[i].type == 1) {
                        // A+
                        this.reportFormWorkList[i].typeList[3] = '〇';
                    }
                    if (this.reportFormWorkList[i].type == 2) {
                        // A+
                        this.reportFormWorkList[i].typeList[2] = '〇';
                    }
                    if (this.reportFormWorkList[i].type == 3) {
                        // A+
                        this.reportFormWorkList[i].typeList[1] = '〇';
                    }
                    if (this.reportFormWorkList[i].type == 4) {
                        // A+
                        this.reportFormWorkList[i].typeList[0] = '〇';
                    }
                }
            }
            // 计算总共多少钱
            this.moneyLeft = 0;
            for (let j = 0; j < this.reportForm.reportFormMoneyList.length; ++j) {
                this.moneyLeft += this.reportForm.reportFormMoneyList[j].financeMoney;
            }
            // console.log(this.typeList);
            this.initMonth();

            // this.reportFormBasicInfo.projectGenerateTime = moment().format('YYYY-MM-DD');
            this.reportFormBasicInfo.projectGenerateTime = moment(this.reportForm.reportFormBasicInfo.projectGenerateTime).format(
                'YYYY-MM-DD'
            );
        }
    }
};
</script>

<style  scoped>
/* .c1{
  width:18px;
  height:18px;
  display:inline-block;
  position:absolute;
  top:10;
  left:10;
  background-color:red;
  border-radius:100%;
 } */
div /deep/ .el-button--info {
    background-color: black;
}

.reportDate {
    margin-bottom: 5px;
    display: block;
}
.main {
    background-color: #eeeeee;
    padding: 10px 10px;
    height: 100vh;
}
.title {
    border: 1px #bcbcbc;
    width: 50%;
    margin: 0 auto;
}
.card {
    border-radius: 15px;
    width: 50%;
    margin: 0 auto;
}
.MsoNormalTable {
    width: 100%;
    border-collapse: collapse;
    border: none;
}
.MsoNormalFont {
    font-size: 5.5pt;
    line-height: 150%;
    font-family: 宋体;
}
.td01 {
    width: 25.32%;
    border: solid windowtext 1pt;
    /* mso-border-alt: solid windowtext 0.5pt; */
    padding: 0cm 5.4pt 0cm 5.4pt;
}
.td02 {
    width: 50.38%;
    border: solid windowtext 1pt;
    border-left: none;
    /* mso-border-left-alt: solid windowtext 0.5pt;
    mso-border-alt: solid windowtext 0.5pt; */
    padding: 0cm 5.4pt 0cm 5.4pt;
}
.td03 {
    width: 24.32%;
    border: solid windowtext 1pt;
    border-left: none;
    /* mso-border-left-alt: solid windowtext 0.5pt;
    mso-border-alt: solid windowtext 0.5pt; */
    padding: 0cm 5.4pt 0cm 5.4pt;
}
.td04 {
    width: 100%;
    border: solid windowtext 1pt;
    border-top: none;
    /* mso-border-top-alt: solid windowtext 0.5pt;
    mso-border-alt: solid windowtext 0.5pt; */
    padding: 0cm 5.4pt 0cm 5.4pt;
}
.td05 {
    width: 14.12%;
    border: solid windowtext 1pt;
    border-top: none;
    /* mso-border-top-alt: solid windowtext 0.5pt;
    mso-border-alt: solid windowtext 0.5pt; */
    padding: 0cm 5.4pt 0cm 5.4pt;
}
.td06 {
    width: 17.1%;
    border-top: none;
    border-left: none;
    border-bottom: solid windowtext 1pt;
    border-right: solid windowtext 1pt;
    /* mso-border-top-alt: solid windowtext 0.5pt;
    mso-border-left-alt: solid windowtext 0.5pt;
    mso-border-alt: solid windowtext 0.5pt; */
    padding: 0cm 5.4pt 0cm 5.4pt;
}
.td07 {
    width: 48.32%;
    border-top: none;
    border-left: none;
    border-bottom: solid windowtext 1pt;
    border-right: solid windowtext 1pt;
    /* mso-border-top-alt: solid windowtext 0.5pt;
    mso-border-left-alt: solid windowtext 0.5pt;
    mso-border-alt: solid windowtext 0.5pt; */
    padding: 0cm 5.4pt 0cm 5.4pt;
}
.td08 {
    width: 20.46%;
    border-top: none;
    border-left: none;
    border-bottom: solid windowtext 1pt;
    border-right: solid windowtext 1pt;
    /* mso-border-top-alt: solid windowtext 0.5pt;
    mso-border-left-alt: solid windowtext 0.5pt;
    mso-border-alt: solid windowtext 0.5pt; */
    padding: 0cm 5.4pt 0cm 5.4pt;
}
.td09 {
    width: 312.5pt;
    border: windowtext 1pt;
    /* mso-border-alt: solid windowtext 0.5pt; */
    padding: 0cm 5.4pt 0cm 5.4pt;
}
.td10 {
    border-collapse: collapse;
    border: none;
    /* mso-border-alt: solid windowtext 0.5pt;
    mso-padding-alt: 0cm 5.4pt 0cm 5.4pt;
    mso-border-insideh: 0.5pt solid windowtext;
    mso-border-insidev: 0.5pt solid windowtext; */
}
.td5-1 {
    width: 3.22%;
    border: solid windowtext 1pt;
    border-top: none;
    padding: 0cm 5.4pt 0cm 5.4pt;
}
.td5-2 {
    width: 5.14%;
    border-top: none;
    border-left: none;
    border-bottom: solid windowtext 1pt;
    border-right: solid windowtext 1pt;
    padding: 0cm 5.4pt 0cm 5.4pt;
}
.td5-3 {
    width: 11.96%;
    border-top: none;
    border-left: none;
    border-bottom: solid windowtext 1pt;
    border-right: solid windowtext 1pt;
    padding: 0cm 5.4pt 0cm 5.4pt;
}
.td5-4 {
    width: 3.82%;
    border-top: none;
    border-left: none;
    border-bottom: solid windowtext 1pt;
    border-right: solid windowtext 1pt;
    padding: 0cm 5.4pt 0cm 5.4pt;
}
.td5-5 {
    width: 5.12%;
    border-top: none;
    border-left: none;
    border-bottom: solid windowtext 1pt;
    border-right: solid windowtext 1pt;
    padding: 0cm 5.4pt 0cm 5.4pt;
}
.td6-1 {
    width: 3.22%;
    border: solid windowtext 1pt;
    border-top: none;
    padding: 0cm 5.4pt 0cm 5.4pt;
    height: 40.05pt;
}
.td6-2 {
    width: 3.24%;
    border-top: none;
    border-left: none;
    border-bottom: solid windowtext 1pt;
    border-right: solid windowtext 1pt;
    padding: 0cm 5.4pt 0cm 5.4pt;
    height: 40.05pt;
}
.td6-3 {
    width: 3.82%;
    border-top: none;
    border-left: none;
    border-bottom: solid windowtext 1pt;
    border-right: solid windowtext 1pt;
    padding: 0cm 5.4pt 0cm 5.4pt;
    height: 40.05pt;
}
.td6-4 {
    width: 3.82%;
    border-top: none;
    border-left: none;
    border-bottom: solid windowtext 1pt;
    border-right: solid windowtext 1pt;
    padding: 0cm 5.4pt 0cm 5.4pt;
    height: 40.05pt;
}
.td6-5 {
    width: 17.1%;
    border-top: none;
    border-left: none;
    border-bottom: solid windowtext 1pt;
    border-right: solid windowtext 1pt;
    padding: 0cm 5.4pt 0cm 5.4pt;
    height: 40.05pt;
}
.td6-6 {
    width: 3.82%;
    border-top: none;
    border-left: none;
    border-bottom: solid windowtext 1pt;
    border-right: solid windowtext 1pt;
    padding: 0cm 5.4pt 0cm 5.4pt;
    height: 40.05pt;
}
.td6-7 {
    width: 5.12%;
    border-top: none;
    border-left: none;
    border-bottom: solid windowtext 1pt;
    border-right: solid windowtext 1pt;
    padding: 0cm 5.4pt 0cm 5.4pt;
    height: 40.05pt;
}
.td7-1 {
    width: 44.48%;
    border: none;
    border-bottom: solid windowtext 1pt;
    padding: 0cm 5.4pt 0cm 5.4pt;
}
.td7-2 {
    width: 24.32%;
    border-top: none;
    border-left: none;
    border-bottom: solid windowtext 1pt;
    border-right: solid windowtext 1pt;
    padding: 0cm 5.4pt 0cm 5.4pt;
}
.td8 {
    width: 85.88%;
    border-top: none;
    border-left: none;
    border-bottom: solid windowtext 1pt;
    border-right: solid windowtext 1pt;
    padding: 0cm 5.4pt 0cm 5.4pt;
    height: 13.3pt;
}
</style>